<template>
    <el-container>
        <el-aside width="20vh" class="aside">
            <div class="logo_box pr">
                <span class="fl w_100 tc f20 text-white w_h_center pl20 pr20">测试服务平台</span>
            </div>
            <el-menu :default-active="activeIndex"
                     class="el-menu-vertical-demo"
                     style="flex: 1; overflow: auto; width: 100%; overflow-x: hidden"
                     background-color="#6187F7"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     unique-opened
                     @select="handleSelect">
                <template v-for="(item, index) in userNav">
                    <el-menu-item :key="index" :index="item.path" v-if="!item.hidden && !item.children">
                        {{ item.name }}
                    </el-menu-item>
                    <el-submenu :key="index" :index="item.path" v-if="!item.hidden && item.children">
                        <template slot="title">{{ item.name }}</template>
                        <nav-menu :user-nav="item.children"/>
                    </el-submenu>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="pr">
                <div class="height_center" style="right: 2vw">
                    <el-dropdown>
                        <h4 class="el-dropdown-link l24">
                            <i class="el-icon-s-custom f24 mr10"></i>
                            <span class="fr h-100 f18 cp"></span>
                        </h4>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <tags-view @changeTag="changeTag"></tags-view>
                <basic-container>
                    <router-view/>
                </basic-container>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import NavMenu from '@/page/navMenu/navMenu'
import {mapState, mapMutations} from 'vuex'
import TagsView from './TagsView/index'
export default {
    name: "layout",
    components: {
        NavMenu,
        TagsView
    },
    data() {
        return {
            url: ''
        }
    },
    created() {
        // 获取菜单权限
        this.setMenu()
    },
    computed: {
        ...mapState(['userNav','activeIndex'])
    },
    methods: {
        ...mapMutations(['setMenu','navClick']),
        handleSelect: function (key) {
            let path = this.$route.path
            if (path !== key) {
                if (key === '/' && path === '/index') {
                    return
                }
                this.$router.push(key)
                // 根据路由创建tag
                this.navClick(key)
            }
        },
        changeTag(path) {
            this.$nextTick(function () {
                this.activeIndex = (path === '/index') ? '/' : path
            })
        }
    }
}
</script>

<style less scoped>
/deep/ .el-tabs__header {
    margin: 0;
}
.aside {
    background-color: #6187F7;
    display: flex;
    flex-direction: column;
}
.logo_box {
    height: 60px;
    border-bottom: 1px solid white;
}
.el-main {
    padding: 0;
    display: flex;
    flex-direction: column;
}
/deep/ .el-submenu__title i {
    color: white;
}
</style>
